<template>
     
  <div class="paperList">
  <!--span class="title">试卷列表</!--span-->
    <el-form   ref="queryForm" :inline="true"  >
       <el-form-item prop="name" >
        <el-input 
        v-model="queryParam.name" 
        clearable 
        placeholder="请输入要查询的试卷名称" 
        prefix-icon="el-icon-search" 
        class="el-input" 
        @blur="getTabelData"
        @keyup.enter.native="getTabelData"> 
        </el-input>
      </el-form-item>
      <el-form-item>
         <el-button  icon="el-icon-plus" type="primary" size="medium" round v-debounce="createPaper">试卷创建</el-button>
      </el-form-item>
      </el-form>

    <el-table v-loading="tableLoading"  :data="tableData" border stripe fit highlight-current-row width="100%">
      <el-table-column prop="id" label="试卷Id" width="120" align="center" ></el-table-column>
      <el-table-column prop="title" label="试卷名称" >
      </el-table-column>
      <el-table-column prop="desc" label="试卷描述" >
      </el-table-column>
    <el-table-column prop="score" align="center"  label="分值" width="250">
      <template v-slot="{ row }">
        <el-tag>{{row.score}}</el-tag>
      </template>
      </el-table-column>
      <el-table-column prop="creatorId" label="创建人" align="center" width="250" />

      <el-table-column label="操作" align="center" >
        <template slot-scope="{ row }">
        <el-button type="text" size="medium" icon="el-icon-view" @click="viewPaper(row)">预览</el-button>
          <el-button type="text" size="medium" icon="el-icon-edit" @click="editPaper(row)">编辑</el-button>
         <el-popconfirm
                icon="el-icon-info"
                icon-color="red"
                title="确定删除这个试卷吗？"
                @confirm="() => delPaper(row)"
              >
                <el-button
                  class="btn_danger"
                  size="medium"
                  icon="el-icon-delete"
                  slot="reference"
                  type="text"
                  :loading="row.delLoading"
                  >删除</el-button
                >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
      <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryParam.current"
      :page-sizes="[5, 10, 15, 20]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
  </div>
</template>

<script>

import {showPapers,deleteTestPaper} from "@/api/testpaper.js"
export default {  //定义vue组件的业务逻辑
  data() {
    return {
      paper: {
        id: null,
        tag: null,
      },
      tableLoading: false,
      tableData: [],
      total:0,
      queryParam:{
        limit:10,
        current:1,
        name:null,
      },
       //rules: {
       // name: [{ required: true, message: "请输入试卷名称", trigger: "blur" }],
      //},
      
    };
  },
  created() {
    this.getTabelData();  
  },
  activated(){
    console.log(2)
  if(this.$route.params.mark==true){
    console.log(1)
    this.getTabelData();
  }
},
  methods: {
    getTabelData(){  //获取表格信息
    this.tableLoading=true;  //在接口未请求到数据之前，显示加载中
    if(this.queryParam.name=="") delete this.queryParam.name;  //获取参数为空时
    showPapers(this.queryParam).then((res)=>{  //显示试卷信息
      res.data.forEach(element => {
        element.delLoading=false;
      });
      this.tableData=res.data;
      this.total=res.total;
    }).catch(()=>{
      this.$message.error("获取试卷数据失败")
    }).finally(()=>{
      this.tableLoading=false;
    })
    },
    handleSizeChange(size) {  //page-size发生改变时发生的函数
      this.queryParam.limit = size;
      this.getTabelData();
    },
    handleCurrentChange(page) {  //currentPage发生变化时的相应函数
      this.queryParam.current = page;
      this.getTabelData();
    },
    viewPaper(data) { //预览试卷
      this.$router.push({name:"testModule/paperView",  
      query:{id:data.id}});
    },
    editPaper(data){  //编辑试卷
      this.$router.push({name:"testModule/paperCreate",  
        query:{id:data.id}})  //传参：data.id
    },
    delPaper(data){  //删除试卷
      data.delLoading=true;  
      deleteTestPaper(data.id).then((res)=>{  
        this.$message.success("删除成功");  //回显信息
        this.getTabelData();
      }).catch(()=>{
        this.$message.error("删除失败");  
      }).finally(()=>{
        data.delLoading=false;
      })
    },
    createPaper() {  //试卷创建
      this.$router.push({name:"testModule/paperCreate"})
    },
    
  }
};
</script>
<style scoped>
.el-form--inline{
  height: 58px;
  box-sizing: border-box;
  display:flex;
  justify-content:space-between;
  
}
.el-form--inline  .el-form-item__label{
  font-size: 14px;
  padding:0px;
  font-weight: bold !important;
}
.el-table__row{
  height: 43px !important;
}
.title{
  display:inline-block;
font-size: 32px;
    color: #409eff;
    margin-bottom: 0.1rem;
    font-weight: bold;
}
.el-input>>>.el-input__inner {
  width: 280px;
  border-radius: 30px;
}

.block {
  margin-top:20px;
}
.btn_danger {
  margin-left:20px;
}

</style>
